<script setup>
import MostHeader from "@/components/MostHeader.vue";
import JobInfoPage from "@/views/jobInformation/components/JobInfoPage.vue";
import JobInfoCard from "@/views/jobInformation/components/JobInfoCard.vue";
import { ref, watch, reactive, onMounted,onBeforeMount } from 'vue'
import { jobInfoStore } from "@/stores/modules/jobInfo.js";
import {message} from 'ant-design-vue'
import { useRoute } from 'vue-router'
import {  selectJob, getCompanyInfoById } from "@/api/company.js";

const companyLogos = reactive({});
const selectedJob = reactive({});
const jobs = reactive([]);
//请求参数
const route = useRoute()
const keyWords = ref(route.query.keyword)
const loc = ref(route.query.loc)

onBeforeMount(async () => {
  try {
    // 并发请求
    const [jobRecommend] = await Promise.all([
      selectJob({
        keywords: keyWords.value,
        city: loc.value
      }),
    ]);
    // 设置数据到 store
    jobInfoStore().setJobInfo(jobRecommend.data.data);
    jobs.splice(0, jobs.length, ...jobInfoStore().jobInfo);

    // 获取公司 logo 并存储到 companyLogos 中
    for (const job of jobs) {
      // 获取每个职位公司logo
      companyLogos[job.jobId] = await getCompanyLogo(job.companyId);
    }
  } catch (error) {
    message.error('获取数据失败');
  }
});

// 获取公司logo
const getCompanyLogo = async (companyId) => {
  try {
    const res = await getCompanyInfoById({
      companyId : companyId
    });
    return res.data.data.logo;
  } catch (error) {
    message.error('获取公司logo失败');
    return '';
  }
};


const selectJobByItem = (item) => {
  Object.assign(selectedJob, item);
};
</script>

<template>
  <div class="job-info-layout">
    <!-- Header -->
    <MostHeader />
    <!--    &lt;!&ndash; 筛选 &ndash;&gt;-->
    <!--    <div class="cate-container">-->
    <!--      <JobInfoCategories />-->
    <!--    </div>-->
    <a-layout class="job-recommendation-container" hasSider>
      <!-- Content -->
      <!-- 左侧卡片列表 -->
      <a-layout-sider width="385" class="job-list">
        <a-list :data-source="jobs" bordered :split="false" item-layout="horizontal" class="job-list-content">
          <template #renderItem="{ item }">
            <a-list-item @click="selectJobByItem(item)"
                         :class="{ 'job-list-item': true, 'job-list-item-selected': selectedJob.jobId === item.jobId }">
              <JobInfoCard
                  :jobTitle="item.title"
                  :salary="item.salary"
                  :tags="item.tag"
                  :companyAddress="item.area"
                  :logo="companyLogos[item.jobId]"
                  :companyName="item.companyName" />
            </a-list-item>
          </template>
        </a-list>
      </a-layout-sider>
      <!-- 右侧详细信息展示 -->
      <a-layout-content class="job-detail">
        <JobInfoPage
            :jobId="selectedJob.jobId"
            :title="selectedJob.title"
            :salary="selectedJob.salary"
            :description="selectedJob.description"
            :companyName="selectedJob.companyName"
            :city="selectedJob.area"
            :tags="selectedJob.tag"
            :companyId="selectedJob.companyId"
            :logo="companyLogos[selectedJob.jobId]">
        </JobInfoPage>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<style scoped>
.job-info-layout {
  width: 100%;
  background-color: #e6f7ff;
  height: 100vh;
  position: absolute;
}

.job-recommendation-container {
  margin: 5px auto;
  width: 1184px;
  background-color: white;
  height: 850px;
  position: relative;
}

.job-list {
  border: 0;
  flex: 1;
  overflow-y: scroll;
  overflow-x: visible;
  background-color: #e6f7ff;
  scrollbar-width: none;
  padding-left: 10px;
  position: relative;
}

.job-list-content {
  margin-top: -5px;
  background-color: #e6f7ff;
  border: 0;
}

.job-list-item {
  cursor: pointer;
  padding: 5px 10px;
  transition: all 0.3s ease;
  /* 动画效果 */
}

.job-list-item-selected {
  transform: scale(1.05) translateX(-10px);
  /* 放大并向左移动 */
  overflow: visible;
}

.job-detail {
  padding: 20px;
  overflow-y: auto;
  height: 100%;
}

.cate-container {
  margin-bottom: 5px;
  height: 165px;
}
</style>
